<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/component.css">
    <title>博客文章</title>
    <style>
        @media screen and (max-width:2480px) {

            html,
            body {
                font-size: 12px;
                margin: 0;
            }

            .app_title {
                width: 100%;
                position: fixed;
                z-index: 1;
                top: 0;
                border-bottom: .3px solid #f0f0f0;
                font-size: 2rem;
                height: 5rem;
                text-align: center;
                background-color: white;
            }

            .app_title_image {
                margin-top: 1.5rem;
                height: 2.5rem;
            }

            .float_right {
                margin-left: 1rem;
                margin-right: 1rem;
                float: right;
            }

            .float_left {
                margin-left: 1rem;
                margin-right: 1rem;
                float: left;
            }

            .article_title {
                padding-top: 5rem;
                font-size: 2rem;
                margin: 1.5rem;
            }

            .article_author {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }

            .article_image {
                border-radius: 2.5rem;
                width: 5rem;
                height: 5rem;
            }

            .article_author_title {
                font-size: 1.4rem;
                font-weight: 700;
                margin-bottom: 0.7rem;
            }

            .article_author_left {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-left: 1rem
            }
            .article_author_right{
                margin-right:1rem
            }

            .article_author_time {
                color: #ccc;
                margin-bottom: 0.3rem
            }
            .article_main{
                font-size:1.8rem;
                margin:1rem;
            }
            .article_read{
                margin-top:1rem;
                color:#ccc;
                font-size:1.5rem;
            }
            .article_comment{
                font-size:1.8rem;
                padding-bottom:5rem;
                margin:1rem;
            }
            .app_bottom {
                position: fixed;
                z-index: 1;
                bottom: 0;
                height: 5rem;
                border-top: .3px solid #f0f0f0;
                width: 100%;
                background-color: white;
            }
        }
    </style>
</head>

<body>
    <header class="app_title">
        <img class="app_title_image float_left" src="../../img/return.png">
        <span style="line-height: 5rem;">牛牛博客</span>
        <img class="app_title_image float_right" src="../../img/more.png">
        <img class="app_title_image float_right" src="../../img/search1.png">
    </header>
    <nav class="article_title">
        小米又上架要一款新品,109元支持防水和10W小时间寿命。
    </nav>
    <aside class="article_author">
        <div class="article_author_left">
            <img src="../../img/user001.gif" class="article_image"></img>
            <div style="margin-left:1rem">
                <div class="article_author_title">小黑科技课堂</div>
                <div class="article_author_time">16个小时前</div>
            </div>
        </div>
        <div class="article_author_right">
            <button type="button" class="login-button">+关注</button>
        </div>
    </aside>
    <article class="article_main">
        <section class="article_content">
                ### h1-h6
        
                本身不是区块标签，只是区块标签中常用的标题标签。因为常与区块标签一起使用，所以放在这里。
        
                h1-h6本身是有默认样式的，也就是说这6个标签并不是纯粹的语义级标签。用的时候一般要先设定自定义的展示效果。
        
                ## 区块标签的基本特征
        
                所有的区块标签都有相同或相似的的特征。
        
                1.
                所有的区块标签都没有除`display:block`之外的默认样式，除非被其子元素撑开或定义高的值，否则区块标签没有高度，这些区宽标签的宽度是继承的其父元素中的宽度，大部分情况下默认是width:100%。（div标签也一样）
                2. 所有的区块标签都是“块级”的。但这种块级特性并不是区块标签的本质特性，而是通过浏览器中预定义的CSS中的`display:block`设置上的。这样的设置可以修改。
        
                ## 块级标签和行级标签
        
                块级是其前、后都不能再有其他标签的标签。`display:block;`。可以理解为：独占一行。
        
                行级是其前、后都可以有其他标签的的标签。`display:inline;`行级标签中以下四个属性无效：margin-top、margin-bottom、padding-top、padding-bottom。另外height属性也无效。
        
                行内块级标签，具有行级标签的特性，但本身是一个块级标签。`display:inline-block;`行内块标签中margin-top、margin-bottom、padding-top、padding-bottom属性有效。
        </section>
        <section class="article_read">51万阅读</section>
        <section class="article_comment">

        </section>
    </article>
    
    <footer class="app_bottom">
        <input type="text" placeholder="写评论">
        <img class="app_title_image" src="../../img/ok.png">
        <img class="app_title_image" src="../../img/five_star.png">
    </footer>
</body>

</html>